<template>
  <div>
    <!-- 蓝色添加按钮 -->
    <el-button
      type="primary"
      style="float: left; margin: 50px 10px"
      @click="dialogFormVisible = true"
      >添加角色</el-button
    >
    <!-- 橙色批量删除按钮 -->
    <el-button type="danger" style="float: left; margin: 50px 10px"
      >批量删除</el-button
    >

    <!-- 表格 -->
    <el-table :data="rolelist" style="width: 100%">
      <el-table-column prop="rolename" label="名称" width="180">
      </el-table-column>

      <!-- 状态 -->
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            :type="scope.row.status == 1 ? 'success' : 'primary'"
            >{{ scope.row.status == 1 ? "启用" : "禁用" }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 点击添加出现的表单 -->
    <el-dialog title="角色添加" :visible.sync="dialogFormVisible">
      <el-form :model="roleform">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="roleform.rolename" autocomplete="off"></el-input>
        </el-form-item>

        <!-- 树状图 -->
        <el-tree
          :data="menulist"
          show-checkbox
          :default-checked-keys="roleform.arrid"
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
        >
        </el-tree>
        <!-- 滑块状态选择器 -->
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="roleform.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addrole">确 定</el-button>
      </div>
    </el-dialog>
    <!-- ------------------------------------------------------------------------- -->

    <!-- 点击编辑出现的表单 -->
    <el-dialog title="角色添加" :visible.sync="dialogFormVisible2">
      <el-form :model="roleform2">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="roleform2.rolename" autocomplete="off"></el-input>
        </el-form-item>

        <!-- 树状图 -->
        <el-tree
          :data="menulist"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree2"
          highlight-current
          :props="defaultProps"
          :default-checked-keys="roleform.arrid"
        >
        </el-tree>
        <!-- 滑块状态选择器 -->
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="roleform.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addrole2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "title",
      },

      //   角色列表数据
      rolelist: [],
      //   菜单列表数据,为了渲染树状图
      menulist: [],
      //   点击关闭添加对话框
      dialogFormVisible: false,
      //   点击关闭编辑对话框
      dialogFormVisible2: false,

      //添加表单数据
      roleform: {
        arrid: [], //树状图选中id
        rolename: "",
        menus: "",
        status: 1,
      },
      //编辑表单数据
      roleform2: {
        id: "",
        rolename: "",
        menus: "",
        status: 1,
        arrid:[]
      },
      //表单宽度
      formLabelWidth: "120px",
    };
  },
  methods: {
    // 添加角色
    addrole() {
      const allnodes = this.$refs.tree.getHalfCheckedKeys();
      const nodes = this.$refs.tree.getCheckedKeys();
      const allnodes2 = [...allnodes, ...nodes].join(",");
      this.roleform.arrid = allnodes2.split(",");
      console.log(this.roleform);

      this.$api.reqAddRole(this.roleform).then((res) => {
        // console.log(res);
        this.dialogFormVisible = false;
        this.$message({
          message: "添加成功",
          type: "success",
        });
        //刷新页面
        // this.$router.go(0);
      });
    },

    //删除角色
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.reqRemoveRole({ id: row.id }).then((res) => {
            // console.log(res);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //刷新页面
            this.$router.go(0);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //点击编辑按钮回填数据
    handleEdit(index, row) {
      console.log(row);
      this.dialogFormVisible2 = true;
      this.roleform2 = row
      this.roleform2.arrid=row.menus.split(",")
      console.log(this.roleform2.arrid)

    },
    //编辑提交
    addrole2() {
      // const allnodes = this.$refs.tree2.getHalfCheckedKeys();
      // const nodes = this.$refs.tree2.getCheckedKeys();
      // const allnodes2 = [...allnodes, ...nodes].join(",");
      // this.roleform2.arrid = allnodes2.split(",");
      // console.log(this.roleform2);

      // this.$api.reqAddRole(this.roleform).then((res) => {
      //   // console.log(res);
      //   this.dialogFormVisible = false;
      //   this.$message({
      //     message: "添加成功",
      //     type: "success",
      //   });
      //   //刷新页面
      //   // this.$router.go(0);
      // });
    },
  
  },
  created() {},
  mounted() {
    // console.log(this.roleform2.arrid)
    // 请求角色数据
    this.$api.reqGetRole().then((res) => {
      // console.log(res);  
      this.rolelist = res.data.list;
    });

    //请求菜单列表数据
    this.$api.reqGetMenu({ istree: true }).then((res) => {
      //   console.log(res);
      this.menulist = res.data.list;
    });
  },
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
</style>
